<template>
  <view class="content">
    <view v-if="isLogin">
      <image class="headicon" @click="changeHeadIcon" :src="'http://localhost:8090/foodapp/'+userInfo.icon"></image>
      <view class="text-area" v-if="isLogin">
        <text class="title">用户名：{{userInfo.username}}</text>
      </view>
    </view>
    <view v-if="!isLogin">
      <image class="headicon" :src="userInfo.icon"></image>
      <view class="text-area">
        <button type="primary" size="mini" @click="toLogin">点击登录</button>
      </view>
    </view>
    <view class="entry-wrapper">
      <view class="item">
        <text>个人信息</text>
        <image src="../../static/右括号.png" mode=""></image>
      </view>
      <view class="item">
        <text>订单列表</text>
        <image src="../../static/右括号.png" mode=""></image>
      </view>
      <view class="item">
        <text>个人信息</text>
        <image src="../../static/右括号.png" mode=""></image>
      </view>
      <view class="item">
        <text>个人信息</text>
        <image src="../../static/右括号.png" mode=""></image>
      </view>
    </view>
    <button type="primary" @click="toLogin">退出</button>
  </view>

</template>

<script>
  export default {
    data() {
      return {
        userInfo: {
          userid: null,
          icon: '/static/image/2.jpg',
          nickname: '',
          username: null
        },
        isLogin: false
      }
    },
    onLoad() {

    },
    onShow() {
      this.getUserInfo();
    },
    methods: {
      changeHeadIcon() {
        let userInfo = uni.getStorageSync('userInfo')
        uni.chooseImage({
          count: 1,
          success: (choosRes) => {
            let filePath = choosRes.tempFilePaths[0]
            console.log(choosRes)
            uni.uploadFile({
              url: this.$baseUrl + 'user/upload_headpic',
              filePath: filePath,
              name: 'file',
              formData: {
                id: this.userInfo.id
              },
              success: (uploadRes) => {
                console.log(uploadRes)
                let resData = JSON.parse(uploadRes.data)
                console.log(resData)
                this.userInfo.icon = resData.data.icon
              }
            })
          }
        })
      },
      logout() {
        uni.setStorageSync('userInfo', null)
        this.getUserInfo()

      },
      toLogin() {
        uni.navigateTo({
          url: './login'
        })
      },
      getUserInfo() {
        let userInfo = uni.getStorageSync('userInfo')
        if (userInfo) {
          this.userInfo = userInfo
          this.isLogin = true
          console.log('用户已登录，读取成功');
        } else {
          this.userInfo.username = null
          this.userInfo.nickname = null
          this.userInfo.icon = '../../static/my.png'
          this.isLogin = false
        }
      }
    }
  }
</script>

<style>
  .content {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: 100%;


  }

  .headicon {
    width: 150rpx;
    height: 150rpx;
    border-radius: 50%;
    margin: 100rpx;
    border: 1px black solid;
  }

  .entry-wrapper {
    width: 90%;
    /* background-color: #888; */
    margin-top: 50rpx;
  }

  .entry-wrapper .item {

    display: flex;
    flex-direction: row;

    justify-content: space-between;

    height: 80rpx;

    align-items: center;

    border-bottom: #333 solid 1rpx;
  }

  .entry-wrapper .item:first-child {

    border-top: #333 solid 1rpx;
  }

  .entry-wrapper .item image {
    width: 48rpx;
    height: 48rpx;
  }

  button {
    width: 95%;
    margin-top: 50rpx;
  }
  .title{
    display: flex;
    flex-direction: column;
    text-align: center;
  }
</style>